<template>
    <div>
        <BaseTable :columns="columns" :data="tableList">
            <template #checkContent="{ scope: { row } }">
                <el-select v-model="row.checkContent" size="mini" placeholder="请选择" style="width: 100%">
                    <el-option v-for="m in tunnelCheckContentOptions2" :key="m.id" :label="m.name" :value="m.name" />
                </el-select>
            </template>
            <template #part="{ scope: { row } }">
                <el-input v-model.trim="row.part" maxlength="20" clearable placeholder="请输入" />
            </template>
            <template #name="{ scope: { row, $index } }">
                <div class="device" @click="handleSelectDevice($index)">
                    <i class="el-icon-arrow-down device-icon"></i>
                    <div v-if="row.deviceList.length === 0" class="placeholder">请选择</div>
                    <div v-else class="color-blue">
                        <BaseTooltips :text="row.deviceListName" class-name="g-line-1" />
                    </div>
                </div>
            </template>
            <template #location="{ scope: { row } }">
                <el-input v-model.trim="row.location" maxlength="20" clearable placeholder="请输入" />
            </template>
            <template #checkSituation="{ scope: { row } }">
                <el-input v-model.trim="row.checkSituation" maxlength="20" show-word-limit clearable placeholder="请输入" />
            </template>
            <template #description="{ scope: { row } }">
                <el-input v-model.trim="row.description" maxlength="200" show-word-limit clearable placeholder="请输入" />
            </template>
            <template #level="{ scope: { row } }">
                <el-select v-model="row.level" size="mini" placeholder="请选择" style="width: 100%">
                    <el-option v-for="m in levelOptions" :key="m.value" :label="m.label" :value="m.value" />
                </el-select>
            </template>
            <template #advice="{ scope: { row } }">
                <el-select v-model="row.advice" size="mini" placeholder="请选择" style="width: 100%">
                    <el-option v-for="m in adviceOptions" :key="m.value" :label="m.label" :value="m.value" />
                </el-select>
            </template>
            <template #remark="{ scope: { row } }">
                <el-input v-model.trim="row.remark" maxlength="20" show-word-limit clearable placeholder="请输入" />
            </template>
            <template #handle="{ scope: { $index } }">
                <BaseButton v-if="$index === tableList.length - 1" type="text" @click="handleAdd">添加行</BaseButton>
                <BaseButton type="text" :disabled="tableList.length === 1" color="danger" @click="handleDelete($index)">删除</BaseButton>
            </template>
        </BaseTable>
        <!-- 选择设备弹框表格 -->
        <el-dialog width="860px" :visible.sync="deviceDialogVisible" title="选择设备">
            <DeviceDialog
                :visible="deviceDialogVisible"
                :params="{ highwayCode: road, direction: direction }"
                @close="deviceDialogVisible = false"
                @get-list="getDeviceList"
            />
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { LocationOptions, LevelOptions, AdviceOptions } from '@/views/maintenance-decision/constants'
import reconfirm from '@/utils/reconfirm'

export default {
    name: 'DeviceFlawTable',
    props: {
        direction: {
            type: String,
            default: ''
        },
        road: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            locationOptions: LocationOptions,
            levelOptions: LevelOptions,
            adviceOptions: AdviceOptions,
            tableList: [
                {
                    checkContent: '',
                    description: '',
                    disposalResults: '',
                    remark: '',
                    deviceList: []
                }
            ],
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '70',
                        type: 'index'
                    }
                },
                {
                    slot: 'checkContent',
                    attrs: {
                        prop: 'checkContent',
                        label: '检查内容',
                        width: '160'
                    }
                },
                {
                    slot: 'part',
                    attrs: {
                        prop: 'part',
                        label: '部位',
                        width: '140'
                    }
                },
                {
                    slot: 'name',
                    attrs: {
                        prop: 'name',
                        label: '设备名称',
                        width: '170'
                    }
                },
                {
                    slot: 'checkSituation',
                    attrs: {
                        prop: 'checkSituation',
                        label: '检查情况',
                        'min-width': '170'
                    }
                },
                {
                    slot: 'description',
                    attrs: {
                        prop: 'description',
                        label: '异常描述（性质、范围、程度）',
                        'min-width': '230'
                    }
                },
                {
                    slot: 'level',
                    attrs: {
                        prop: 'level',
                        label: '判定',
                        width: '130'
                    }
                },
                {
                    slot: 'advice',
                    attrs: {
                        prop: 'advice',
                        label: '养护措施建议',
                        width: '160'
                    }
                },
                {
                    slot: 'remark',
                    attrs: {
                        prop: 'remark',
                        label: '备注',
                        'min-width': '130'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '140'
                    }
                }
            ]),
            currentIndex: 0,
            deviceDialogVisible: false
        }
    },
    computed: {
        ...mapState('types', ['tunnelCheckContentOptions2'])
    },
    watch: {
        direction(newValue, oldValue) {
            console.log('direction>>>', newValue)
        }
    },
    created() {
        this.$store.dispatch('types/query', 'tunnelCheckContentOptions2')
    },
    methods: {
        handleAdd() {
            this.tableList.push({
                locationType: '',
                location: '',
                type: '',
                description: '',
                unit: '',
                num: '',
                disposalResults: '',
                deviceList: []
            })
        },
        handleDelete(index) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    this.tableList.splice(index, 1)
                }
            })
        },
        handleSelectDevice(index) {
            // 当前点击选择机电的数据下标
            this.currentIndex = index
            this.deviceDialogVisible = true
        },
        getDeviceList(value) {
            this.tableList[this.currentIndex].deviceList = value
            this.tableList[this.currentIndex].deviceListName = value.map((item) => item.name).join('；')
            this.tableList[this.currentIndex].name = value.map((item) => item.name).join(',')
        }
    }
}
</script>

<style lang="scss" scoped>
.device {
    min-width: 100px;
    height: 32px;
    padding: 0 20px 0 5px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    position: relative;
    color: #d2d2d2;
    cursor: pointer;
    .placeholder {
        padding-left: 15px;
    }
    .device-icon {
        font-size: 14px;
        position: absolute;
        right: 5px;
        top: 8px;
    }
}
</style>
